<template>
	<uni-popup ref="popup" type="bottom">
		<view class="popup-warp">
			<!-- <slot></slot> -->
			<!-- <view class="audio-img">
				
			</view> -->
			<view class="audio-opt">
				<view @click="startRecord" v-if="!isRecording">开始录音</view>
				<view v-else @click="stopRecord(1)">完成录音</view>
				<view @click="stopRecord(0)">取消</view>
			</view>
			
		</view>
	</uni-popup>
	
	
</template>

<script>
	import UNI_APP from '@/.env.js';

	export default {
		name: "audio-upload",
		data() {
			return {
				uploadHeaders: {
					"accessToken": uni.getStorageSync('loginInfo').accessToken
				},
				
				type: '',
				isRecording: false, // 是否正在录音
				recorderManager: null, // 录音管理器实例
				recordFilePath: '' // 录音文件路径
			}
		},
		props: {
			maxSize: {
				type: Number,
				default: 10 * 1024 * 1024
			},
			onBefore: {
				type: Function,
				default: null
			},
			onSuccess: {
				type: Function,
				default: null
			},
			onError: {
				type: Function,
				default: null
			}
		},
		methods: {
			openPopup() {
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			
			
			// 开始录音
			startRecord() {
				this.recorderManager = uni.getRecorderManager();
				this.recorderManager.onStart(() => {
					console.log('开始录音');
					this.isRecording = true;
				})

				this.recorderManager.onStop(res => {
					console.log('取消录音', res);
					console.log('取消录音类型',this.type)
					
					this.isRecording = false;
					// this.recordFilePath = res.tempFilePath; // 录音文件路径
					
					this.recordFilePath = this.type ? res.tempFilePath : ''
					
					// innerAudioContext.destroy(); // 销毁音频播放器对象
					// console.log('this.recordFilePath===', this.recordFilePath)
					if(!this.type) return 
					
					const file = {
						path: this.recordFilePath
					}
					
					console.log('filexxx===',file)
					
					if (!this.onBefore || this.onBefore(file)) {
						this.uploadAudio(file)
					}
					
				})

				this.recorderManager.start({
					format: 'mp3' // 录音格式，可选值：aac/mp3
				});
			},

			// 取消录音
			stopRecord(type) {
				this.type = type
				if(!type) {
					this.$refs.popup.close()
				}
				
				this.recorderManager.stop();
			},

			// 上传语音
			uploadAudio(file) {
				// this.recordFilePath
				console.log('file====',file)
				uni.uploadFile({
					url: UNI_APP.BASE_URL + '/uploadFile',
					header: {
						token: uni.getStorageSync("token")
					},
					filePath: file.path, // 要上传文件资源的路径
					name: 'file',
					success: (res) => {
						let data = JSON.parse(res.data);
						if(data.code != 0){
							
						}else {
							this.onSuccess && this.onSuccess(file, data);
						}
					},
					fail: (err) => {
						this.onError && this.onError(file, err);
					}
				})
			}


		},
	}
</script>

<style lang="scss" scoped>
	.popup-warp {
		// height: 400rpx;
		padding: 30rpx 100rpx 40rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		.audio-img {
			height: 200rpx;
			border: 2rpx solid red;
		}
		
		.audio-opt {
			display: flex;
			justify-content: space-around;
			margin-top: 20rpx;
			flex: 1;
			
			view {
				display: flex;
				align-items: center;
			}
		}
	}
</style>